<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-container>
        <el-header style="text-align: left; font-size: 14px">
          <span class="link" @click="$router.push('/')">阅读博客</span>
        </el-header>
        <el-main>
          <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column prop="_id" label="ID" width="280"></el-table-column>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <!-- ${scope.row._id}表示当前这一行的id -->
                <el-button @click.native.prevent="del(scope.row._id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      async fetch() {
        const res = await this.$http.get('/register')
        this.tableData = res.data
      },
      //删除用户
      async del(id) {
        //element的MessageBox 弹框组件
        this.$confirm("是否确定删除该用户", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await this.$http.delete('/del/'+id)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          //删除成功重新渲染页面
          this.fetch()
        })
      }
    },
    created() {
      this.fetch()
    }
  }
</script>

<style lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    .link {
      margin-left: 3rem;
    }
    .link:hover {
      cursor: pointer;
      color: brown;
    }
  }
</style>